import React, { useContext, useEffect, useState } from 'react';
import { Typography, Button } from 'antd';
import { ColumnsType } from 'antd/es/table';
import DateFrom from '@/components/MarketingMap/DateFrom';
import TabelLoadMore from '@/components/MarketingMap/TabelLoadMore';
import Loadable from '@/components/MarketingMap/Loadable';
import { exportVehicle } from '@/services/marketingMap/overallAnalysis';
import FriendsComparison from './FriendsComparison';
import styles from '../styles/panel.less';
import OverallContext from '../context';
import { formatValue } from '@/utils/marketingMap/utils';
import TipMessage from '@/components/MarketingMap/TipMessage';

interface TabelDataType {
  rank: number;
  code: string;
  name: string;
  customerCount: number;
  recentYearCustomerCount: number;
  aftersalesCount: number;
  totalAftersalesCount: number;
}

const StatisticsOverview: React.FC<any> = ({ data, isAuth }) => {
  const { query, date, codeNameMap, onSubmit } = useContext(OverallContext);

  const [isFirstLoad, setIsFirstLoad] = useState(true);
  const { store } = codeNameMap;

  const [toStore, setToStore] = useState<null | { code: string; name: string }>(null);

  const [visible, setVisible] = useState<boolean>(false);

  const showDrawer = (data: { code: string; name: string }) => {
    setToStore(data);
    setVisible(true);
  };

  const onClose = () => {
    setVisible(false);
  };

  const columns: ColumnsType<TabelDataType> = [
    {
      title: '排名',
      dataIndex: 'rank',
      width: 40,
    },
    {
      title: '售后店',
      dataIndex: 'name',
      key: 'name',
      render: (text: string) => (
        <Typography.Text style={{ width: 180, color: '#0009' }} ellipsis={{ tooltip: text }}>
          {text}
        </Typography.Text>
      ),
    },
    {
      className: styles.white_space,
      title: (
        <TipMessage name="近1年有效保客数">
          <Typography.Text>近1年保客数</Typography.Text>
        </TipMessage>
      ),
      dataIndex: 'recentYearVehicleCount',
      width: 80,
    },
    {
      className: styles.white_space,
      title: '保客售后次数',
      dataIndex: 'aftersalesCount',
      width: 60,
    },
    {
      className: styles.white_space,
      title: '总售后次数',
      dataIndex: 'totalAftersalesCount',
      width: 60,
    },
    {
      title: '操作',
      render: ({ name, code }) => (
        <Button type="link" size="small" onClick={() => showDrawer({ name, code })}>
          与TA对比
        </Button>
      ),
    },
  ];

  useEffect(() => {
    setToStore(null);
    setVisible(false);
  }, [query.store, query.areaRange]);

  useEffect(() => {
    if (Boolean(data)) {
      setIsFirstLoad(false);
    }
  }, [Boolean(data)]);

  return (
    <div className={styles.sidenar_wrapper}>
      <DateFrom value={date} onChange={onSubmit} />
      <Loadable isFirstLoad={isFirstLoad}>
        <div>
          <Typography className={styles.title}>
            <Typography.Text strong>{store}售后整体情况</Typography.Text>
          </Typography>
          <div className={styles.box} style={{ padding: '0 24px' }}>
            <div className={styles.item}>
              <div>
                <span style={{ fontSize: 20, color: '#000' }}>
                  {formatValue(data?.overviewData?.vehicleCount)}
                </span>{' '}
                台
              </div>
              <TipMessage name="售后车辆">
                <span>售后车辆</span>
              </TipMessage>
            </div>
            <div className={styles.item}>
              <div>
                <span style={{ fontSize: 20, color: '#000' }}>
                  {formatValue(data?.overviewData?.aftersalesCount)}
                </span>{' '}
                次
              </div>
              <TipMessage name="售后车次">
                <span>售后车次</span>
              </TipMessage>
            </div>
            <div className={styles.item}>
              <div>
                <span style={{ fontSize: 20, color: '#000' }}>
                  {formatValue(data?.overviewData?.recentYearVehicleCount)}
                </span>{' '}
                台
              </div>
              <TipMessage name="近1年有效保客数">
                <span>近1年有效保客数</span>
              </TipMessage>
            </div>
          </div>
          {isAuth && (
            <Button className={styles.export} type="primary" onClick={() => exportVehicle(query)}>
              车辆导出
            </Button>
          )}
        </div>
        <div>
          <Typography className={styles.title}>
            <TipMessage name="友商">
              <Typography.Text strong>附近有哪些友商</Typography.Text>
            </TipMessage>
          </Typography>
          <div className={styles.box} style={{ padding: '0 24px' }}>
            <div className={styles.item}>
              <div>
                <span style={{ fontSize: 20, color: '#000' }}>
                  {formatValue(data?.nearbyData?.count)}
                </span>{' '}
                家
              </div>
              <span>附近售后店</span>
            </div>
            <div className={styles.item}>
              <div>
                <span style={{ fontSize: 20, color: '#000' }}>
                  {formatValue(data?.nearbyData?.recentYearVehicleCount)}
                </span>{' '}
                台
              </div>
              <TipMessage name="近1年车辆保有量">
                <span>近1年车辆保有量</span>
              </TipMessage>
            </div>
          </div>
        </div>
        <div>
          <Typography className={styles.title}>
            <Typography.Text strong>友商店铺统计</Typography.Text>
          </Typography>
          <TabelLoadMore columns={columns} dataSource={data?.rankData} rowKey="code" />
        </div>
      </Loadable>
      {toStore && (
        <FriendsComparison isAuth={isAuth} visible={visible} toStore={toStore} onClose={onClose} />
      )}
    </div>
  );
};

export default StatisticsOverview;
